<template>
  <div class="color-view">
    <div class="color-view__header">
      <div class="color-view__name">
        {{ list[index].name }}
      </div>
      <div>
        <a href="javascript:;" @click="handleToggle">{{ showWhite ? '隐藏' : '显示' }}白圈</a>｜
        <a href="javascript:;" @click="handleGo(-1)">上一个</a>｜
        <a href="javascript:;" @click="handleGo(1)">下一个</a>｜
        <a href="javascript:;" @click="handleClear">清空画板</a>
      </div>
    </div>
    <div class="color-view__wrapper">
      <div class="color-view__draw">
        <div v-for="(row,i) in list[index].data" :key="i" class="color-row">
          <div v-for="(col,j) in row"
:key="j"
:data-key="col"
class="color-col"
            :class="showWhite ? '' : 'hidden-white'"
:style="{ backgroundColor: colorMap[col] }">
          </div>
        </div>
      </div>
      <div class="color-view__draw">
        <div v-for="(row,i) in data" :key="i" class="color-row">
          <div v-for="(col,j) in row"
:key="j"
:data-key="col"
class="color-col"
            :style="{ backgroundColor: colorMap[col] }"
@click="handleColorCell(i,j)">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import listJson from './data.json'
import emptyJson from './empty.json'

const index = ref(0)
const showWhite = ref(true)
const colorMap = ref({
  0: 'white',
  1: 'red',
  2: 'yellow',
  3: 'blue',
  4: 'green',
  5: 'black'
})
const data = ref(JSON.parse(JSON.stringify(emptyJson)))
const list = ref(listJson)
const handleColorCell = (i,j) => {
  data.value[i][j]++
  if (data.value[i][j] > 5) {
    data.value[i][j] = 0
  }
}
const handleGo = (value) => {
  index.value += value
  if (index.value >= 12) {
    index.value = 0
  } else if (index.value < 0) {
    index.value = 11
  }
}
const handleToggle = () => {
  showWhite.value = !showWhite.value
}
const handleClear = () => {
  data.value = JSON.parse(JSON.stringify(emptyJson))
}
</script>
<style lang="less">
.color-view {
  border: 1px solid;

  &__header {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid;
  }

  &__name {
    text-indent: 1rem;
  }

  &__wrapper {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
  }

  .color-view__draw {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 1rem 0;

    &:first-child {
      border-right: 1px solid;
    }
  }

  .color-row {
    display: flex;
  }

  .color-col {
    width: 40px;
    height: 40px;
    border: 1px solid black;
    margin: 0 6px 8px 0;
    border-radius: 50%;

    &.hidden-white[data-key="0"] {
      opacity: 0;
    }
  }
}
</style>